import { DatabaseOutlined, FileSyncOutlined } from '@ant-design/icons';
import { Badge, Card, Layout, Menu } from 'antd';
import { SelectInfo } from 'rc-menu/lib/interface';
import React, { useState } from 'react';
import { useAccess } from 'umi';
import TableInterview from './components/TableInterview';
import { useModel } from '@umijs/max';
import NotAccessPage from '@/components/NotAccessPage';

export default (): React.ReactNode => {
    const access = useAccess();
    const { initialState } = useModel('@@initialState');
    const { currentUser } = initialState || {};
    const [tabActiveKey, setTabActiveKeyState] = useState(0);

    const renderBadge = (count: number, active = false) => {
        return (
            <Badge
                count={count}
                style={{
                    marginBlockStart: -2,
                    marginInlineStart: 4,
                    color: active ? '#1890FF' : '#999',
                    backgroundColor: active ? '#E6F7FF' : '#eee',
                }}
            />
        );
    };
    const menuList = () => {
        if (currentUser?.permissions.includes('interview:page')) {
            return [
                {
                    label: <span>全部任务{renderBadge(0, tabActiveKey === 0)}</span>,
                    key: 0,
                    icon: <DatabaseOutlined />,
                },
                !access.采访要素匹配x管理员 && {
                    label: <span>已报名任务{renderBadge(0, tabActiveKey === 1)}</span>,
                    key: 1,
                    icon: <FileSyncOutlined />,
                },
                // access.采访要素匹配x采访媒体 && {
                //     label: <span>审核任务{renderBadge(0, tabActiveKey === 2)}</span>,
                //     key: 2,
                //     icon: <FileSyncOutlined />,
                // },
            ]
        } else {
            return []
        }
    }
    return (
        <Layout
            hasSider
            style={{
                backgroundColor: '#F7F7F7',
                padding: '15px',
                height: '100%'
            }}
        >
            <Layout.Sider
                width={300}
                style={{
                    backgroundColor: '#F7F7F7',
                    overflow: 'auto',
                    height: '100%',
                    position: 'fixed',
                    paddingBottom: 30,
                }}
            >
                <Card
                    style={{
                        height: '100%',
                    }}
                    bordered={false}
                    styles={{
                        body: {
                            padding: '8px 15px 15px',
                        },
                    }}
                >
                    <span style={{ fontSize: 14, display: 'flex', justifyContent: 'center', padding: 5, fontWeight: 'bold' }}>采访要素匹配</span>
                    <Menu
                        onSelect={(info: SelectInfo) => {
                            setTabActiveKeyState(Number(info.key));
                        }}
                        style={{ width: '100%', height: '100%', borderInlineEnd: 'none' }}
                        // defaultSelectedKeys={[!access.采访要素匹配x采访媒体 ? '0' : '1']}
                        defaultSelectedKeys={'0'}
                        mode="vertical"
                        items={menuList()}
                    />
                </Card>
            </Layout.Sider>
            <Layout.Content style={{ marginLeft: '315px' }}>
                <div
                    style={{
                        width: 'calc(100% - 315px)',
                        height: '100%',
                        position: 'fixed',
                        paddingBottom: 30,
                        paddingRight: 30,
                    }}
                >
                    <Card
                        style={{
                            height: '100%',
                            overflow: 'auto',
                        }}
                        styles={{
                            body: {
                                padding: '8px',
                            },
                        }}
                    >
                        {currentUser?.permissions.includes('interview:page') ? <TableInterview type={tabActiveKey} /> : <NotAccessPage />}
                    </Card>
                </div>
            </Layout.Content>
        </Layout>
    );
};
